<!-- 经典布局 -->
<template>
	<el-container class="layout">
		<el-header>
			<div class="header-lf mask-image">
				<div class="logo">
					<!-- <div class="logo-button" :class="isMenu?'active':''" @mouseenter="showMenuFun"
						@mouseleave="initMenu" @click="controlMenu"> -->
					<div class="logo-button" :class="isMenu?'active':''" @click="controlMenu">
						<span></span>
						<span></span>
						<span></span>
					</div>
					<div class="logo-message flx-center">
						<img class="logo-img" src="@/assets/images/qifa_logo.png" alt="logo" />
						<span class="logo-text" v-if="language === 'zh'">{{title_CN}}</span>
						<span class="logo-text" v-else>{{title_RU}}</span>
					</div>
					
				</div>
				<ToolBarLeft />
			</div>
			<div class="header-ri">
				<ToolBarRight />
			</div>
		</el-header>
		<el-container class="classic-content">
			<el-container class="classic-main">
				<Main />
				<!--悬浮 一级菜单 -->
				<div class="aside-box fixed" :class="isMenu?'active enter-done':'enter-done'">
					<el-scrollbar>
						<div class="aside-item flx-align-center" :class="menuIndex == null?'active':''" @mouseenter="showMenuIndex(null)">
							<img :src="globalStore.isDark?getAssetURL('creation-dark.png'):getAssetURL('creation.png')" alt="" />
							<!-- <el-icon size="18px" color="var(--el-menu-left-text-color)"><Grid /></el-icon> -->
							<span class="sle-value">{{$t('menu_list.shortcut_application')}}</span>
						</div>
						<div class="aside-item flx-align-center" :class="menuIndex == sIdx?'active':''" v-for="(subItem,sIdx) in menuList" :key="sIdx" @mouseenter="showMenuIndex(sIdx)">
							
							<!-- <el-icon size="18px" color="var(--el-menu-left-text-color)" v-if="subItem.meta.icon">
							  <component :is="subItem.meta.icon"></component>
							</el-icon> -->
							<img :src="globalStore.isDark?getAssetURL(subItem.meta.dark_icon):getAssetURL(subItem.meta.icon)" alt="" />
							<span class="sle-value">{{ language == 'zh'?subItem.meta.title:subItem.meta.title_ru }}</span>
						</div>
					</el-scrollbar>
				</div>
				<!--悬浮 子菜单 -->
				<div class="submenu-box fixed" :class="isMenu?'active enter-done':'enter-done'">
					<div class="menu-close" @click="hideMenuFun">
						<el-icon size="24px" color="var(--el-menu-right-close-color)"><Close /></el-icon>
					</div>
					<div class="submenu-left-list">
						<div class="collect-container" v-if="menuIndex == null">
							<el-scrollbar>
								<div class="collect-title collect-message">{{$t('menu_list.recently_visited')}}</div>
								<div class="simple-list" v-if="recentsList && recentsList.length > 0">
									<div class="simple-item" :class="language == 'zh'?'simple-4':'simple-3'" v-for="(sItem,index) in recentsList" :key="index">
										<!-- <el-tooltip
											class="box-item"
											:content="sItem.frist_menu+'>'+sItem.second_menu"
											placement="top"
										  >
											
										</el-tooltip> -->
										<div class="simple-desc" :class="sItem.is_collect?'active':''">
											<div class="simple-name" @click="onBreadcrumbClickOther(sItem)">{{language == "zh"?sItem.title:sItem.title_ru}}</div>
											<div class="collect-box" @click="collectItem(sItem.id)">
												<div class="icon">
													<el-icon size="18px" v-if="sItem.is_collect" color="var(--el-color-primary)"><StarFilled /></el-icon>
													<el-icon class="noCollect" size="14px" v-else color="var(--el-color-primary)"><Star /></el-icon>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="collect-title collect-message pt">{{$t('menu_list.my_favorite')}}</div>
								<div class="simple-list" v-if="collectList && collectList.length > 0">
									<div class="simple-item" :class="language == 'zh'?'simple-4':'simple-3'" v-for="(sItem,index) in collectList" :key="index">
										<!-- <el-tooltip
											class="box-item"
											:content="sItem.frist_menu+'>'+sItem.second_menu"
											placement="top"
										  >
											
										</el-tooltip> -->
										<div class="simple-desc active">
											<div class="simple-name" @click="onBreadcrumbClickOther(sItem)">{{language == "zh"?sItem.title:sItem.title_ru}}</div>
											<div class="collect-box" @click="collectItem(sItem.id)">
												<div class="icon">
													<el-icon size="18px" color="var(--el-color-primary)"><StarFilled /></el-icon>
												</div>
											</div>
										</div>
									</div>
								</div>
							</el-scrollbar>
						</div>
						<div class="s-menu-bottom" v-else>
							<el-input v-model="searchMenuValue" @input="searchMenuList" class="search-menu-input" clearable prefix-icon="Search" :placeholder="$t('menu_list.search_hint')"></el-input>
							<el-scrollbar>
								<div class="list-content" :class="language == 'zh'?'colums-4':'colums-3'">
									<template v-if="menuList[menuIndex].children && menuList[menuIndex].children.length > 0">
										<div class="s-item" :class="filterArrFunction(1,{indexOne})?'':'noMargin'" v-for="(sItemOne,indexOne) in menuList[menuIndex].children" :key="indexOne">
											<template v-if="filterArrFunction(1,{indexOne})">
												<div class="s-message s-title">{{language == "zh"?sItemOne.meta.title:sItemOne.meta.title_ru}}</div>
												<template v-if="sItemOne.children && sItemOne.children.length > 0">
													
													<template v-for="(sItemTwo,indexTwo) in sItemOne.children" :key="indexTwo">
														<template v-if="filterArrFunction(2,{indexOne,indexTwo})">
															<template v-if="sItemTwo.meta.is_tag == true">
																<template v-if="filterArrFunction(2,{indexOne,indexTwo})">
																	<div class="s-message s-desc" >{{language == "zh"?sItemTwo.meta.title:sItemTwo.meta.title_ru}}</div>
																	<template v-if="sItemTwo.children && sItemTwo.children.length > 0">
																		<div class="s-message flx-justify-between s-menu-label" :class="filterArrFunction(2,{indexOne,indexTwo})?'':'noMargin'"  v-for="(sItemThree,indexThree) in sItemTwo.children" :key="indexThree">
																			<template v-if="filterArrFunction(3,{indexOne,indexTwo,indexThree})">
																				<div @click="onBreadcrumbClick(sItemThree)">{{language == "zh"?sItemThree.meta.title:sItemThree.meta.title_ru}}</div>
																				<div class="collect-box">
																					<div class="icon flx-center" :class="sItemThree.meta.is_collect?'active':''" @click="collectItem(sItemThree.id)">
																						<el-icon size="18px" v-if="sItemThree.meta.is_collect" color="var(--el-color-primary)"><StarFilled /></el-icon>
																						<el-icon class="noCollect" size="14px" v-else color="var(--el-color-primary)"><Star /></el-icon>
																					</div>
																				</div>
																			</template>
																		</div>
																	</template>
																</template>
															</template>
															<div class="s-message flx-justify-between s-menu-label" :class="filterArrFunction(2,{indexOne,indexTwo})?'':'noMargin'"  v-else>
																<div class="router-name" @click="onBreadcrumbClick(sItemTwo)">{{language == "zh"?sItemTwo.meta.title:sItemTwo.meta.title_ru}}</div>
																<div class="collect-box">
																	<div class="icon flx-center" :class="sItemTwo.meta.is_collect?'active':''" @click="collectItem(sItemTwo.id)">
																		<el-icon size="18px" v-if="sItemTwo.meta.is_collect" color="var(--el-color-primary)"><StarFilled /></el-icon>
																		<el-icon class="noCollect" size="14px" v-else color="var(--el-color-primary)"><Star /></el-icon>
																	</div>
																</div>
															</div>
															
														</template>
													</template>
													
												</template>
											</template>
											
										</div>
									</template>
								</div>
							</el-scrollbar>
						</div>
					</div>
				</div>
				<!--悬浮 遮罩 -->
				<div class="menu-shade" v-if="isMenu" @click="hideMenuFun"></div>
			</el-container>
		</el-container>
	</el-container>
</template>

<script setup lang="ts" name="layoutQifa">
	import { ref, computed } from 'vue'
	
	import { useRouter } from "vue-router";
	import { useAuthStore } from "@/stores/modules/auth";
	import { useGlobalStore } from "@/stores/modules/global";
	import Main from "@/layouts/components/Main/index.vue";
	import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
	import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";


	const title_CN = import.meta.env.VITE_GLOB_APP_TITLE_CN;
	const title_RU = import.meta.env.VITE_GLOB_APP_TITLE_RU;
	const authStore = useAuthStore();
	const globalStore = useGlobalStore();
	const router = useRouter();
	const isMenu = ref(false);
	const menuSwitch = ref(true);
	const menuIndex = ref(null);
	
	const searchMenuValue = ref('');//菜单搜索
	const initList = computed(() => authStore.showMenuListGet);//原始菜单数据
	const menuList = computed(() => authStore.showMenuListGet);//菜单数据
	const collectList = computed(() => authStore.collectMenuListGet);//我的收藏
	const recentsList = computed(() => authStore.recentsMenuListGet);//最近访问
	const language = computed(() => globalStore.language);//页面翻译语种
	const filterArr = ref([]);//搜索到的菜单下标
	let timer:any= null;
	const getAssetURL = (image : string) => {
		return new URL(`../../assets/images/${image}`, import.meta.url).href
	}
	//收藏/取消收藏
	const collectItem = (id:string) =>{
		authStore.getCollectMenuItem(id).then(e=>{
			authStore.getAuthMenuList();
			authStore.getCollectMenuList();
		})
	}
	//浮动菜单控制
	const showMenuFun = () => {
		if (timer !== null) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			if (menuSwitch.value) {
				isMenu.value ? '' : isMenu.value = true;
				menuSwitch.value = false;
			}     
		}, 300)
		
	}
	const hideMenuFun = () => {
		
		if (menuSwitch.value == false) {
			isMenu.value = false;
			menuSwitch.value = true;
		}
	}
	const controlMenu = () => {
		if (timer !== null) {
			clearTimeout(timer)
		}
		if (menuSwitch.value == false) {
			isMenu.value = false;
			menuSwitch.value = true;
		} else {
			isMenu.value = true;
			menuSwitch.value = false;
		}
		
	}
	const initMenu = () => {
		clearTimeout(timer)
		if (isMenu.value == false) {
			menuSwitch.value = true;
		}
		

	}
	const showMenuIndex = (e: string | number | void) => {
		if(menuIndex.value != e){
			menuIndex.value = e;
			searchMenuValue.value = '';
			filterArr.value = [];
		}
		
		
	}

	
	// 页面路由跳转
	const onBreadcrumbClick = (item: Menu.MenuOptions) => {
		if (item.meta.is_link) return window.open(item.meta.is_link, "_blank");
		if(item.meta.sub_title != "" && item.meta.sub_title_ru != ""){
			if(language == "zh"){
				router.push(item.path+'?sub_title=' + item.meta.sub_title);
			} else {
				router.push(item.path+'?sub_title=' + item.meta.sub_title_ru);
			}
		} else {
			router.push(item.path);
		}
		hideMenuFun()
	};
	
	const onBreadcrumbClickOther = (item: Menu.MenuOptions) => {
		if(item.sub_title != "" && item.sub_title_ru != ""){
			if(language == "zh"){
				router.push(item.path+'?sub_title=' + item.sub_title);
			} else {
				router.push(item.path+'?sub_title=' + item.sub_title_ru);
			}
		} else {
			router.push(item.path);
		}
		
		hideMenuFun()
	};
	
	const searchMenuList = () => {
		const queryString = searchMenuValue.value;
		if(queryString != '' && menuIndex != null){
			const results = menuList.value.filter((e,t)=>t==menuIndex.value);
			const thisArr = ref([]);
			
			results.forEach((subArray,subIdx) => {
			    subArray.children.forEach((item,index)=>{
					const tItem:any = item.children.filter((j,i)=>{
						if(j.meta.title.includes(queryString)){
							let data = ref({
								twoData:index,
								threeData:i,
							})
							thisArr.value.push(data)
						}
						return j.meta.title.includes(queryString)
					})
				})
			});
			filterArr.value = thisArr.value;
		} else {
			filterArr.value = []
		}
	};
	
	const filterArrFunction = (type:any,data:any,name) =>{
		//console.log(type)
		//console.log(data)
		const queryString = searchMenuValue.value;
		if(queryString != '' && menuIndex != null){
			if(filterArr.value.length > 0){
				// console.log(filterArr.value)
				// console.log(type)
				// console.log(data)
				if(type == 1){
					filterArr.value.some((e:any)=> e.value.twoData == data.indexOne)
					return filterArr.value.some((e:any)=> e.value.twoData == data.indexOne)
				} else if(type == 2){
					//console.log()
					if(name){
						if((filterArr.value.some((e:any)=> e.value.twoData == data.indexOne && e.value.threeData == data.indexTwo))){
							//console.log(name)
						}
					}
					return (filterArr.value.some((e:any)=> e.value.twoData == data.indexOne && e.value.threeData == data.indexTwo))
					
				} else if(type == 3){
					return (filterArr.value.some((e:any)=>e.value.twoData == data.indexOne && e.value.threeData == data.indexTwo && e.value.fourData == data.indexThree))
				}
			} else {
				//console.log('没有数据啊')
				return false
			}
		} else {
			return true
		}
		
		
	}
</script>

<style scoped lang="scss">
	@import "./index.scss";
</style>
<style>
	/* .el-drawer{
		width: auto !important;
	} */
	.search-menu-input .el-drawer__body {
		padding: 0;
	}
	.search-menu-input .el-input__wrapper{
		box-shadow: none !important;
	}
	 
</style>